import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class chartComponent {
  constructor(private http: HttpClient) {}
  chartOption={};
  pieOption={};
  city = [];
  type = ['营收额', '成本', '净利润'];
  distribution=[]
  profitLossData=[]
  ngOnInit() {
    this.http.get('http://www.zhengbenzixun.cn:8080/cityCount').subscribe(res => {
     for(let i in res){
       this.city.push(res[i].cityName);
       let cityData={
        value:res[i].cityStaffNum,
        name:res[i].cityName
       }
       let profitData={
        name: res[i].cityName,
        type: 'bar',
        revenueName:'营收额',
        revenue:res[i].cityRevenue,
        costName:'成本',
        cost:res[i].cityCost,
        profitName:'净利润',
        profit : res[i].cityProfit,
        data: [res[i].cityRevenue,res[i].cityCost, res[i].cityProfit]
       }
       this.profitLossData.push(profitData);
       this.distribution.push(cityData);
     }
     this.chartOption = {
      title: {
        text: '营收对比图'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {           
          type: 'shadow'        
        }
      },
      legend: {
        data: this.city
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: this.type
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: this.profitLossData
    };
    this.  pieOption = {
      title: {
        text: '员工分布图',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        x: 'center',
        y: 'bottom',
        data:this.city
      },
      toolbox: {
        show: true,
        feature: {
          magicType: {
            show: true,
            type: ['pie', 'funnel']
          },
        }
      },
      calculable: true,
      series: [
  
        {
          name: '员工分布',
          type: 'pie',
          radius: [30, 110],
          center: ['50%', '50%'],
          roseType: 'area',
          data:this.distribution
        }
      ]
    }
    })
  }
}
